<template>
  <div class="periodsnum">
    <flexbox>
      <flexbox-item :span="1/4">
        <div class="seedling">禾苗</div>
      </flexbox-item>
      <flexbox-item :span="1/2">
        <div class="num-search"><span><img src="../assets/image/search.svg" alt=""></span><input type="text" placeholder="第3期"></div>
      </flexbox-item>
    </flexbox>
    <div>
      <panel :list="lists" type="5" />
    </div>
  </div>
</template>
<script>
import { Panel, Flexbox, FlexboxItem } from 'vux'
export default {
  name: 'periodsnum',
  data () {
    return {
      lists: [{
        title: '《禾苗》第1期',
        src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4114476644,1300040066&fm=27&gp=0.jpg',
        fallbackSrc: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4114476644,1300040066&fm=27&gp=0.jpg'
      }, {
        title: '《禾苗》第2期',
        src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4114476644,1300040066&fm=27&gp=0.jpg',
        fallbackSrc: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4114476644,1300040066&fm=27&gp=0.jpg'
      }
      ]
    }
  },
  components: {
    Panel,
    Flexbox,
    FlexboxItem
  }
}

</script>
<style lang="less" scoped>
.seedling {
  text-align: center;
  font-size: 21px;
  font-weight: bold;
}

.num-search {
  border: 2px solid #D9D9D9;
  margin: 8px 0;
  border-radius: 4px;

  span {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 4px;
    vertical-align: middle;

    img {
      width: 100%;
    }
  }

  input {
    line-height: 30px;
    border: none;
    width: 80%;
  }
}

</style>
